import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { withStyles } from 'material-ui/styles'

import style from './style/recent_item'
import dateFormat from '../../util/date_format'

const CommonItem = (props) => {
  const { topic, classes } = props
  return (
    <div key={topic.id} className={classes.topicItem}>
      <div className={classes.avatar}>
        <Link to={`/user/${topic.author.loginname}`}>
          <img
            src={topic.author.avatar_url}
            alt={topic.author.loginname}
            className={classes.avatarImg}
          />
        </Link>
      </div>
      <h3 className={classes.title}><Link to={`/topic-detail/${topic.id}`} className={classes.link}>{topic.title}</Link></h3>
      <span className={classes.replayAt}>发表于：{dateFormat(topic.last_reply_at, 'yyyy-mm-dd')}</span>
    </div>
  )
}
export default withStyles(style)(CommonItem)

CommonItem.propTypes = {
  topic: PropTypes.objectOf(Object),
  classes: PropTypes.objectOf(Object),
}
